import React, { FC, useEffect } from 'react';
import { Form, Input, Select, Switch } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { QuestionTitlePropsType } from "./interface"
const PropComponent: FC<QuestionTitlePropsType> = (props: QuestionTitlePropsType) => {
    const { text, level, isCenter, onChange } = props;
    const [from] = Form.useForm()
    useEffect(() => {
        from.setFieldsValue({ text, level, isCenter })
    }, [text, level, isCenter])
    
    function handleValueChange() {
        if (onChange) {
            onChange(from.getFieldsValue())
        }
    }
    return <Form form={from} onValuesChange={handleValueChange} initialValues={{ text, level, isCenter }} layout='vertical'>
        <Form.Item label="标题" name="text" rules={[{ required: true, message: '请输入标题' }]}>
            <Input />
        </Form.Item>
        <Form.Item label="Placeholder" name="level" >
            <Select options={[{ value: 1, text: 1 }, { value: 2, text: 2 }, { value: 3, text: 3 }]} />
        </Form.Item>
        <Form.Item label="居中" name="isCenter" valuePropName="checked">
            <Switch
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
            />
        </Form.Item>
    </Form>
}
export default PropComponent;